<template>
	<div>
		<div class="form1">
			账号: <input type="text" v-model="account.username" /> 密码:
			<input type="password" name="" id="" v-model="account.password" />
		</div>

		<div class="form2">
			账号: <input type="text" v-model="username" /> 密码:
			<input type="password" name="" id="" v-model="password" />
		</div>

		<ul>
			<li v-for="item in musics" :key="item">{{ item }}</li>
		</ul>
	</div>
</template>

<script>
import { reactive, ref, onMounted } from 'vue'

export default {
	setup() {
		// 1. reactive的应用场景
		// 1.1 reactive应用与本地数据, 1.2. 多个数据之间是有管关联的
		const account = reactive({
			username: '张三',
			password: '1234565',
		})

		// 2. ref的应用场景: 其他的场景基本都使用ref(computed)
		// 2.1 定义本地一些基本数据
		const username = ref('张三')
		const password = ref('123234')

		// 2. 定义从网络中获取的数据,也是使用ref
		const musics = ref([])
		onMounted(() => {
			const serverMusic = ['abc', 'cba', 'nbc']
			musics.value = serverMusic
		})

		return {
			account,
			username,
			password,
			musics,
		}
	},
}
</script>

<style scoped></style>
